<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Cell Editing in DataGrid - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <link rel="stylesheet" type="text/css" href="demo.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.easyui.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#dg').datagrid({
    	        data: [
                    {"stepWidth":"280","stepHeight":"160","status":"P","stepNum":"18","platformTopLength":"1520",
                    "platformBottomLength":"400","stairBoardHeight":"270","stairBoardWidth":"2450"},
                    {"stepWidth":"280","stepHeight":"160","status":"P","stepNum":"18","platformTopLength":"1520",
                    "platformBottomLength":"400","stairBoardHeight":"270","stairBoardWidth":"2450"},
                    {"stepWidth":"280","stepHeight":"160","status":"P","stepNum":"18","platformTopLength":"1520",
                    "platformBottomLength":"400","stairBoardHeight":"270","stairBoardWidth":"2450"},
    	        ]
            });
        });
    </script>
</head>
<body>
    <h2>预制装配式楼梯参数表</h2>
    <p>点击单元格可以编辑参数</p>
    <div style="margin:20px 0;"></div>
    
    <table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="width:700px;height:auto"
            data-options="
                iconCls: 'icon-edit',
                singleSelect: true,
                onClickCell: onClickCell
            ">
        <thead>
            <tr>
                <th data-options="field:'stepWidth',width:80,align:'center',editor:'numberbox'">踏步宽<br>(mm)</th>
                <th data-options="field:'stepHeight',width:80,align:'center',editor:'numberbox'">踏步高<br>(mm)</th>
                <th data-options="field:'stepNum',width:80,align:'center',editor:'text'">踏步数<br>(级)</th>
                <th data-options="field:'platformTopLength',width:80,align:'center',editor:'text'">上平台长<br>(mm)</th>
                <th data-options="field:'platformBottomLength',width:80,align:'center',editor:'text'">下平台长<br>(mm)</th>
                <th data-options="field:'stairBoardHeight',width:80,align:'center',editor:'text'">梯板厚<br>(mm)</th>
                <th data-options="field:'stairBoardWidth',width:80,align:'center',editor:'text'">梯板宽<br>(mm)</th>
                <th data-options="field:'status',width:80,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">选择</th>
            </tr>
        </thead>
    </table>
    <div style="text-align: center;margin: 30px;">
        <input type="button" value="确定" onclick="confirm()">&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="button" value="取消" onclick="cancel()">
    </div>
    <script type="text/javascript">
        $.extend($.fn.datagrid.methods, {
            editCell: function(jq,param){
                return jq.each(function(){
                    var opts = $(this).datagrid('options');
                    var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor1 = col.editor;
                        if (fields[i] != param.field){
                            col.editor = null;
                        }
                    }
                    $(this).datagrid('beginEdit', param.index);
                    for(var i=0; i<fields.length; i++){
                        var col = $(this).datagrid('getColumnOption', fields[i]);
                        col.editor = col.editor1;
                    }
                });
            }
        });
        
        var editIndex = undefined;
        function endEditing(){
            if (editIndex == undefined){return true}
            if ($('#dg').datagrid('validateRow', editIndex)){
                $('#dg').datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }
        function onClickCell(index, field){
            if (endEditing()){
                $('#dg').datagrid('selectRow', index)
                        .datagrid('editCell', {index:index,field:field});
                editIndex = index;
            }
        }
        function confirm(){
            
            var selectedRow = $('#dg').datagrid('getSelected');
            var data_arr = [selectedRow.stepWidth,selectedRow.stepHeight,
                            selectedRow.stepNum,selectedRow.platformTopLength,
                            selectedRow.platformBottomLength,selectedRow.stairBoardHeight,
                            selectedRow.stairBoardWidth];
            
            //alert(data_arr);

            sketchup.confirm(data_arr); //数据传输到ruby后台

        }

        function cancel(){
			sketchup.cancel();
		}
    </script>
</body>
</html>